|
官网地址：ElementUI-Checkbox
一、Checkbox 基础介绍
备选项
export default {
data() {
return {
checked: true
};
}
};
v-model="checked" v-model 为 true 的时候，数据为勾选状态
可通过改变 v-model 的值控制数据的勾选状态
export default {
data () {
return {
checkList: ['选中且禁用','复选框 A']
};
}
};
el-checkbox-group 元素能把多个 checkbox 管理为一组，用 v-model 绑定 Array 类型的变量，变量中的数据即为勾选状态。 label="复选框 A" groop 下 checkbox 的 label 即为此 checkbox 的值，label 值如果存在在 v-model 中，则此数据为勾选状态
全选
indeterminate 与 v-model 共同控制 checkbox 的状态，选中、半选中、未选中，一般用于全选按钮
indeterminate 和 v-model 都为 false ，则未选中indeterminate 为 false，v-model 为true ，则选中indeterminate 为 true，v-model 为 false 或者 true，则半选中
二、Checkbox 实现单选，嵌套多选（第一版：所有选项不可取消选中）
效果图
智能筛选
真实火警
超时未处理
不接收子单位报警
全部接收
完成
export default {
data() {
return {
checked1:false,
checked2:false,
checked3:false,
isIndeterminate: false,
checks:[]
};
},
methods: {
checkChange(param){
switch(param){
case 3:
this.checked1=true;
this.checked2=false;
this.checked3=false;
this.checks= ['1','2'];
this.isIndeterminate = false;
this.alarmType = param;
break;
case 0:
this.checked1=false;
this.checked2=true;
this.checked3=false;
this.checks= [];
this.isIndeterminate = false;
this.alarmType = param;
break;
case 4:
this.checked1=false;
this.checked2=false;
this.checked3=true;
this.checks= [];
this.isIndeterminate = false;
this.alarmType = param;
break;
case 2:
this.checked2=false;
this.checked3=false;
this.checks.push('2')
this.checked1 = this.checks.includes('1') && this.checks.includes('2');
this.isIndeterminate = !this.checked1;
this.alarmType = param;
break;
case 1:
this.checked2=false;
this.checked3=false;
this.checks.push('1');
this.checked1 = this.checks.includes('1') && this.checks.includes('2');
this.isIndeterminate = !this.checked1;
this.alarmType = param;
break;
}
},
三、Checkbox 实现单选，嵌套多选（第二版：所有选项都可取消选中）
效果图 
checkChange(param){
switch(param){
case 0:
this.checked1=false;
this.checked3=false;
this.checks= [];
this.isIndeterminate = false;
this.alarmType = param;
break;
case 1:
this.checked2=false;
this.checked3=false;
this.checked1 = this.checks.includes('1') && this.checks.includes('2');
this.isIndeterminate = this.checks.length == 1 ? true : false;
this.alarmType = param;
break;
case 2:
this.checked2=false;
this.checked3=false;
console.log(this.checks);
this.checked1 = this.checks.length == 2
console.log(this.checked1);
this.isIndeterminate = this.checks.length == 1 ? true : false;
this.alarmType = param;
break;
case 3:
this.checked2=false;
this.checked3=false;
console.log(this.checks);
this.checks= (this.checks.includes('1') && this.checks.includes('2')) ? [] : ['1', '2'];
console.log(this.checks);
this.checked1= this.checks.length ? true : false;
this.isIndeterminate = this.checks.length ? false : false;
this.alarmType = param;
break;
case 4:
this.checked1=false;
this.checked2=false;
this.checks= [];
this.isIndeterminate = false;
this.alarmType = param;
break;
}
四、Checkbox 实现单选，嵌套多选（第三版：所有一级选项不可取消选中，二级选项可取消选中，但当二级选项只有一个选中时，不可取消选中）
效果图 
checkChange(param){
switch(param){
case 0:
this.checked1=false;
this.checked2=true;
this.checked3=false;
this.checks= [];
this.isIndeterminate = false;
this.alarmType = param;
break;
case 1:
this.checked2=false;
this.checked3=false;
this.checked1 = this.checks.includes('1') && this.checks.includes('2');
this.checks.length == 0 ? this.checks.push('1') : this.checks
this.isIndeterminate = !this.checked1;
this.alarmType = param;
break;
case 2:
this.checked2=false;
this.checked3=false;
this.checked1 = this.checks.includes('1') && this.checks.includes('2');
this.checks.length == 0 ? this.checks.push('2') : this.checks
this.isIndeterminate = !this.checked1;
this.alarmType = param;
break;
case 3:
this.checked2=false;
this.checked3=false;
this.checks = ['1', '2']
this.checked1=this.checks.includes('1') && this.checks.includes('2')
this.isIndeterminate = this.checks.length ? false : false;
this.alarmType = param;
break;
case 4:
this.checked1=false;
this.checked2=false;
this.checked3=true;
this.checks= [];
this.isIndeterminate = false;
this.alarmType = param;
break;
}
},
this.checks.length == 0 ? this.checks.push('2') : this.checks 加了一个判断，就可实现 二级选项只有一个选中时，不可取消选中 
|